<template>
<div class="search">
  <form action="/">
    <van-search
      v-model="searchText"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      background="#3296fa"
      @focus="isResults=false"

    />
  </form>
  <!--搜索结果-->
  <search-results
    v-if=" isResults"
    :search-text="searchText"
  ></search-results>
  <!--搜索建议-->
  <search-suggestion
    v-else-if="searchText.length !==0"
   :search-text="searchText"
    @search="onSearch"

  ></search-suggestion>
<!--  搜索历史-->
  <search-history v-else :search-history="searchHistories" ref="useHistory" @onSearch="onSearch"></search-history>


</div>
</template>

<script>

import searchHistory from './components/search-history'
import searchSuggestion from './components/search-suggestion'
import searchResults from './components/search-results'

export default {
name: "index",
  data(){
  return{
    searchText:'',
    isResults:false,  //是否有搜索结果
    searchHistories: []//放搜索记录
  }},
  components:{
  searchHistory,
    searchResults,
    searchSuggestion

  },
mounted() {
this.islww()
},

  methods:{


    onSearch(val) {
      // Toast(val);
      this.searchText=val
      // 存储搜索历史记录
      // 要求：不要有重复历史记录、最新的排在最前面
      const index = this.searchHistories.indexOf(val)
      if (index !== -1) {
        this.searchHistories.splice(index, 1)
      }
      this.searchHistories.unshift(val)
      // 渲染搜索结果
      this.isResults=true
    },

    onCancel() {
      // Toast('取消');
      this.$router.back()
    },
    islww(){
      this.$refs.useHistory.History()
    }
  }
}
</script>

<style scoped lang="less">
.search{

  .van-search__action{//按钮颜色背景
    background-color: transparent;
    color: white;

  }

}


</style>
